<template>
  <div class="container" style="margin-bottom: 50px">
    <p class="title">
      订单详情
      <el-button
        type="primary"
        class="btn"
        @click="$router.back()"
      >返回</el-button>
    </p>
    <el-form ref="form" label-width="80px" style="width: 80%">
      <el-form-item label="订单信息">
        <label for="">订单编号: </label> <span>{{ info.orderNo }}</span><br>
        <label for="">查博士订单号: </label> <span>{{ info.cbsOrderNo }}</span><br>
        <!-- <label for="">订单编号: </label> <span>{{ info.orderNo }}</span><br> -->
        <label for="">创建时间: </label><span>{{ info.creatTime }}</span><br>
        <label for="">投保套餐: </label><span>{{ ['基础保修','优选保修','综合保修','全面保修'] [info.type] }}</span><br>
        <label for="">是否检测: </label><span>{{ info.checked==true?'是':'否' }}</span><br>
        <label for="">平台: </label><span v-if="info.application">{{ info.application=='00'?'ebroker':'车E家' }}</span>
      </el-form-item>
      <el-form-item label="支付信息">
        <label for="">支付方式: </label>
        <span>{{ ["支付宝", "微信"][info.payWay] }}</span> <br>
        <label for="">消费金额: </label><span>{{ info.amount }}</span><br>
        <label for="">支付订单号: </label><span>{{ info.thirdTradeNo || '暂无' }}</span><br>
        <label for="">支付时间: </label><span>{{ info.payTime || '暂无' }}</span><br>
      </el-form-item>
      <el-form-item label="合同信息">
        <!-- 101-待付款,102-待检测,103-检测中,104-已检测,105-订单取消,106-已投保，107-待签字 -->
        <label for="">延保状态: </label><span>{{
          info.contractStatus == 101
            ? "待付款"
            : info.contractStatus == 102
              ? "待检测"
              : info.contractStatus == 103
                ? "检测中"
                : info.contractStatus == 105
                  ? "订单取消"
                  : info.contractStatus == 106
                    ? "已投保"
                    : info.contractStatus == 107
                      ? "待签字"
                      : info.contractStatus == 108?
                        '投保中':info.contractStatus == 109? '已退款':'' }}</span>
        <br>
        <label for="">合同链接: </label><span
          v-if="info.contractStatus==107 || info.contractStatus==106"
          style="color: #00f; cursor: pointer"
          @click="open"
        >查看报告</span><br>
        <!-- <label for="">合同生校时间: </label><span>{{ info.reportCreateTime || "暂无" }}</span><br> -->
        <label for="">报告开始时间: </label><span>{{ info.contractStartTime || "暂无" }}</span><br>
        <label for="">报告到期时间: </label><span>{{ info.contractEndTime || "暂无" }}</span><br>
      </el-form-item>
      <el-form-item label="车辆信息">
        <label for="">VIN: </label> <span>{{ info.vin }}</span> <br>
        <label for="">行驶证: </label><span>
          <!-- <img style="width:100px;height:60px" :src="info.drivingLicenceUrl"> -->
          <el-image
            v-if="info.drivingUrl"
            style="width: 100px; height: 60px; vertical-align: top"
            :src="info.drivingUrl"
            :preview-src-list="[info.drivingUrl]"
          /> </span><br>
        <label for="">里程表: </label><span>
          <!-- <img style="width:100px;height:60px" :src="info.drivingLicenceUrl"> -->
          <el-image
            v-if="info.mileageUrl"
            style="width: 100px; height: 60px; vertical-align: top"
            :src="info.mileageUrl"
            :preview-src-list="[info.mileageUrl]"
          /> </span><br>
        <label for="">车牌号: </label><span>{{ info.vehicleNo || "暂无" }}</span><br>
        <label for="">使用性质: </label><span>{{ ['非营运','营运','营转非','租赁','教练'] [info.isUser] || "暂无" }}</span><br>
        <label for="">初登日期: </label><span>{{ info.registerDate || "暂无" }}</span><br>
        <label for="">品牌车型: </label><span>{{ info.modelBrand || "暂无" }}</span><br>
        <label for="">级别类型: </label><span>{{ info.levelType || "暂无" }}</span><br>
      </el-form-item>
      <el-form-item label="用户信息">
        <label for="">用户ID: </label> <span>{{ info.userId }}</span> <br>
        <label for="">联系人: </label><span>{{ info.name }}</span><br>
        <label for="">手机号: </label> <span>{{ info.mobile }}</span> <br>
        <label for="">车辆详情地址: </label> <span>{{ info.address }}</span> <br>
      </el-form-item>
      <el-form-item v-if="info.refundTime" label="退款信息">

        <label for="">退款人: </label><span>{{ info.refundUser }}</span><br>
        <label for="">退款方式: </label>
        <span>{{ ["支付宝", "微信"][info.refundType] }}</span> <br>
        <label for="">退款时间: </label><span>{{ info.refundTime }}</span><br>
        <label for="">退款金额: </label><span>{{ info.refundAmount }}</span><br>
        <label for="">退款订单号: </label><span>{{ info.refundTradeNo }}</span><br>
      </el-form-item>
    </el-form>
    <el-dialog
      v-dialogDrag
      title="报告详情"
      :visible.sync="dialogVisible"
      width="380px"
    >
      <iframe
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="yes"
        allowtransparency="yes"
        style="width:350px;height:800px"
        :src="info.contractUrl"
      />
    </el-dialog>
  </div>
</template>

<script>
// import echarts from 'echarts'
export default {
  data() {
    return {
      dialogVisible: false,
      info: {
        'orderId': '', // 订单id
        'orderNo': '', // 订单编号
        'cbsOrderNo': null, // 查博士订单号
        'creatTime': '', // 创建时间
        'type': 0, // 投保套餐 0-基础保修，1-优选保修，2-综合保修，3-全面保修
        'packageType': 105,
        'checked': false, // 是否必检 false-否，true-是
        'payWay': 0, // 支付方式 0-支付宝，1-微信，2-积分
        'amount': '3.00', // 消费金额
        'thirdTradeNo': null, // 支付订单号
        'payTime': null, // 支付时间
        'contractStatus': null, // contractStatus
        'contractUrl': null, // 合同链接
        'contractCreateTime': null, // 合同生效时间
        'contractStartTime': null, // 合同开始时间
        'contractEndTime': null, // 合同到期时间
        'vin': '', // VIN
        'drivingUrl': '', // 行驶证图片
        'mileageUrl': '', // 里程表图片
        'vehicleNo': '', // 车牌号
        'isUser': 0, // 使用性质 0-非营运,1-营运,2-营转非,3-租赁,4-教练
        'registerDate': '', // 初登日期
        'modelBrand': '', // 品牌车型
        'levelType': 'A', // 级别类型 A、B、C、D
        'userId': 1, // 用户id
        'name': '', // 联系人
        'mobile': '', // 手机号
        'address': '', // 车辆详细地址
        'refundUser': null, // 退款人
        'refundType': 0, // 退款方式 0-支付宝，1-微信，2-积分
        'refundTime': null, // 退款时间
        'refundAmount': null, // 退款金额
        'refundTradeNo': null
      },
      activeNames: ['0'],
      chart: null
    }
  },
  created() {
    // this.$get(
    //   `/web/carVinReport/getOrderDetail?id=${this.$route.query.id}`
    // ).then((res) => {
    //   if (res.data.code === '0') {
    //     this.info = res.data.data
    //   } else {
    //     this.$message.error(res.data.message)
    //   }
    // })
  },
  mounted() {
    this.$get(`web/extendedWarranty/getDetails?orderId=${this.$route.query.id}`).then((res) => {
      console.log(res)
      if (res.data.code === '0') {
        this.info = res.data.data
        console.log(this.myinfo)
      } else {
        this.$message.error(res.data.message)
      }
    })
  },
  methods: {
    handleChange(val) {
      console.log(val)
    },
    open() {
      this.dialogVisible = true
      this.contractStatus
      // this.$nextTick(() => {
      //   this.chart = echarts.init(document.getElementById('mycharts'))
      //   console.log(this.chart)
      //   const time = this.myinfo.mileages.map(item => item.recordTime)
      //   const mileage = this.myinfo.mileages.map(item => Number(item.mileage))
      //   const index = mileage.indexOf(Math.max(...mileage))
      //   console.log(index)
      //   // 指定图表的配置项和数据
      //   var option = {
      //     // 标题
      //     title: {
      //       text: '里程记录疑似调表'
      //     },
      //     // 工具箱
      //     // 保存图片
      //     toolbox: {
      //       show: true,
      //       feature: {
      //         saveAsImage: {
      //           show: true
      //         }
      //       }
      //     },
      //     // 图例-每一条数据的名字叫销量
      //     legend: {
      //       data: ['本车里程曲线']
      //     },

      //     // x轴
      //     xAxis: {
      //       data: this.myinfo.mileages.map(item => item.recordTime)
      //     },
      //     // y轴没有显式设置，根据值自动生成y轴
      //     yAxis: {},
      //     // 数据-data是最终要显示的数据
      //     series: [{
      //       name: '本车里程曲线',
      //       type: 'line',
      //       data: this.myinfo.mileages.map(item => item.mileage),
      //       markPoint: {
      //         data: [
      //           { xAxis: time[index], yAxis: mileage[index], value: '异常' }
      //         ]
      //       }
      //     }]
      //   }
      //   this.chart.setOption(option)
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
table{
  width: 100%;
  // border: 1px solid #ccc;
  th,td{
    width: 100;
    border: 1px solid #ccc;
    text-align: center;
    height: 30px;
  }
}
/deep/ .el-collapse-item{
  position: relative;
}
.myRight{
 position: absolute;
 right: 30px;
 top: 0px;

}
.box-content {
  border-bottom: 1px solid #f1f1f1;
}
.container {
  .el-form-item {
    /deep/ .el-form-item__label {
      font-weight: 700 !important;
    }
  }

  width: 80%;
  margin: 0 auto;
  .title {
    position: relative;
    height: 80px;
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    .btn {
      position: absolute;
      right: 0;
      top: 25px;
    }
  }
  label {
    width: 200px;
    display: inline-block;
    text-align: center;
  }
  .content {
    height: 800px;
    position: relative;
    width: 450px;
    overflow: hidden;
    overflow-y: auto;
    .top {
      height: 60px;
      padding: 0 12px;
      line-height: 60px;
      .tips {
        transform: translateY(5px);
        width: 5px;
        height: 26px;
        opacity: 1;
        display: inline-block;
        margin-right: 13px;
        border: 3px solid #f4b22d;
        background: #f4b22d;
        border-radius: 6px;
      }
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      color: #323232;
    }
    .item {
      // height: 88px;
      // line-height: 44px;
      padding: 20px 31px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .items {
      padding: 10px 31px;
      // border-bottom: 1px solid #f1f1f1;
      display: flex;
      font-size: 16px;
      justify-content: space-between;
      .left {
        color: #919598;
      }
      .right {
        color: #323232;
      }
    }
    .myContent {
      .item {
        height: 44px;
        line-height: 1px;
        padding: 20px 31px;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        font-size: 16px;
        justify-content: space-between;
        .left {
          color: #919598;
        }
        .right {
          color: #323232;
        }
      }
    }

    button {
      margin-right: 10px;
      font-size: 16px;
      width: 80px;
      height: 40px;
      opacity: 0.6;
      background: #f1f1f1;
      margin-bottom: 10px;
      border-radius: 6px;
      cursor: pointer;
      border: none;
      &.activeColor {
        opacity: 1;
        background: #f4b22d;
        border-radius: 6px;
      }
    }
    .contentDefault {
      height: 392px;
      // width: 100vw;
      padding: 30px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
  }
}
</style>

